<template>
  <div>
      <div class="crumbs">
          <el-button icon="el-icon-refresh" @click="RefreshAlert()">刷新</el-button>
          <el-button icon="el-icon-close" style="margin-left:940px;" @click="ExitAlert()">退出</el-button>
      </div>
      <div class="pagecenter">
          <rm-layout-top splitcolor="white" :splitwidth=5 :fixsize=280 :rememberConfig="false" :canDrag="false">
              <template v-slot:fix>
                  <div class="container" style="height:100%;">
                      <div class="message-center">
                          <el-tabs v-model="message">
                              <el-tab-pane :label="`持续提醒列表(${alertlist.length})`" name="first">
                                  <div style="width: 1000px;height:150px;margin-top:20px;">
                                      <el-table :data="alertlist" :show-header="false" @cell-click="messageChange">
                                          <el-table-column width="250" property="title">
                                              <template slot-scope="scope">
                                                  <span class="message-title">{{scope.row.title}}</span>
                                              </template>
                                          </el-table-column>
                                          <el-table-column width="80" property="msglevel">
                                              <template slot-scope="scope">
                                                  <span>{{scope.row.msglevel == 1 ? '警告' : '提示'}}</span>
                                              </template>
                                          </el-table-column>
                                          <el-table-column width="550" property="msgcontent">
                                              <template slot-scope="scope">
                                                  <span>{{$pub.contrltextnum(scope.row.msgcontent, 40)}}</span>
                                              </template>
                                          </el-table-column>
                                          <el-table-column width="120">
                                              <template slot-scope="scope">
                                                  <el-button type="primary" @click="handleRead(scope.$index, scope.row)">本次登录不再提醒</el-button>
                                              </template>
                                          </el-table-column>
                                      </el-table>
                                  </div>
                              </el-tab-pane>
                              <el-tab-pane :label="`本次登录不再提醒列表(${noalertlist.length})`" name="second">
                                  <div style="width: 1000px;height:150px;margin-top:20px;">
                                      <el-table :data="noalertlist" :show-header="false" @cell-click="messageChange">
                                          <el-table-column width="250" property="title">
                                              <template slot-scope="scope">
                                                  <span class="message-title">{{scope.row.title}}</span>
                                              </template>
                                          </el-table-column>
                                          <el-table-column width="80" property="msglevel">
                                              <template slot-scope="scope">
                                                  <span>{{scope.row.msglevel == 1 ? '警告' : '提示'}}</span>
                                              </template>
                                          </el-table-column>
                                          <el-table-column width="550" property="msgcontent">
                                              <template slot-scope="scope">
                                                  <span>{{$pub.contrltextnum(scope.row.msgcontent, 40)}}</span>
                                              </template>
                                          </el-table-column>
                                          <el-table-column width="120">
                                              <template slot-scope="scope">
                                                  <el-button type="info" @click="handleUnRead(scope.$index, scope.row)">恢复继续提醒</el-button>
                                              </template>
                                          </el-table-column>
                                      </el-table>
                                  </div>
                              </el-tab-pane>
                          </el-tabs>
                      </div>
                  </div>
              </template>
              <div style="height:100%;width:100%;border: 1px solid #ddd;border-radius: 5px;">
                  <div v-if="alertkey" style="height:400px;" :key="alertkey">
                      <rm-msgalert :params="alertparams" @change="alertkey = 0"></rm-msgalert>
                  </div>
                  <div v-else><span style="color:#ddd;font-size: 40px;">选择提醒后加载</span></div>
              </div>
          </rm-layout-top>
      </div>
  </div>
</template>

<script>
import RmMsgalert from "@/components/rmcompents/msgcenter/msgcenter.vue";
  export default {
      components: {
          RmMsgalert,
      },
      name: 'tabs',
      data() {
          return {
              message: 'first',
              alertlist: [],
              noalertlist: [],
              alertkey: 0,
              alertparams: {},
              confirmignoretype: [2,4,5,6,7,15,16],//禁止忽略提醒列表
          }
      },
      created() {
          this.initData();
      },
      methods: {
          initData() {
              this.alertlist = [];
              this.noalertlist = [];
              this.$tool
                  .request({
                      url: "ucent/getmsg",
                      method: "post",
                      data: {
                          userno: this.$pub.getuser(this, 1),
                          mac: this.$pub.getmac(),
                      },
                  })
                  .then((res) => {
                      let thisloginignorealertlist = JSON.parse(this.$tool.getSession("thisloginignorealertlist"));
                      console.log(thisloginignorealertlist);
                      if(res && res.length > 0) {
                          res.forEach((item)=> {
                              if(thisloginignorealertlist) {
                                  if(thisloginignorealertlist.indexOf(item.msgtype) > -1) {
                                      this.noalertlist.push({ title: item.title, type: item.msgtype, params: item, msglevel: item.msglevel, msgcontent: item.msgcontent });
                                  } else {
                                      this.alertlist.push({ title: item.title, type: item.msgtype, params: item, msglevel: item.msglevel, msgcontent: item.msgcontent });
                                  }
                              } else {
                                  this.alertlist.push({ title: item.title, type: item.msgtype, params: item, msglevel: item.msglevel, msgcontent: item.msgcontent });
                              }
                          });
                      }
                  })
                  .catch((erro) => {});
          },
          RefreshAlert() {
              this.initData();
          },
          ExitAlert() {
              this.$emit("closeAlertCenter");
          },
          messageChange(row, column) {
              if(column && column.property) {
                  this.alertkey = row.type;
                  this.alertparams = row.params;
              }
          },
          handleRead(index, row) {
              if(this.confirmignoretype.indexOf(row.type) > -1) {
                  this.$alert("警告消息禁止列入本次登录不再提醒列表！", "提示");
              } else {
                  const item = this.alertlist.splice(index, 1);
                  this.noalertlist = item.concat(this.noalertlist);
                  let thisloginignorealertlist = JSON.parse(this.$tool.getSession("thisloginignorealertlist"));
                  if(!thisloginignorealertlist) thisloginignorealertlist = [];
                  thisloginignorealertlist.push(row.type);
                  this.$tool.setSession("thisloginignorealertlist", JSON.stringify(thisloginignorealertlist));
                  console.log(thisloginignorealertlist);
              }
          },
          handleUnRead(index, row) {
              //要增加提示，如果标记为已读，将不再右下角弹出提醒
              const item = this.noalertlist.splice(index, 1);
              this.alertlist = item.concat(this.alertlist);
              let thisloginignorealertlist = JSON.parse(this.$tool.getSession("thisloginignorealertlist"));
              thisloginignorealertlist.forEach((item, index) => {
                  if(item == row.type) {
                      thisloginignorealertlist.splice(index, 1);
                  }
              });
              this.$tool.setSession("thisloginignorealertlist", JSON.stringify(thisloginignorealertlist));
              console.log(thisloginignorealertlist);
          },
      },
  }

</script>

<style scoped>
.message-title{
  cursor: pointer;
}
::v-deep .pagecenter {
  position: absolute;
  top: 80px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}
.message-center {
display: flex;
flex-direction: column;
height: 100%;
}

.message-center .el-tabs__header {
margin-bottom: 20px;
}

.message-center .el-tab-pane {
padding: 20px;
}

.message-center  .el-table {
width: 100%;
}

::v-deep .container h1{
  color:blue;
  text-decoration: underline;
}

::v-deep .container h2 :span{
  color: red;
}
</style>

